(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "maishu-dilu", "react", "components/common/base-component", "maishu-ui-toolkit", "services/shopping", "maishu-services-sdk", "maishu-jueying"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const maishu_dilu_1 = require("maishu-dilu");
    const React = require("react");
    const base_component_1 = require("components/common/base-component");
    const ui = require("maishu-ui-toolkit");
    const shopping_1 = require("services/shopping");
    const maishu_services_sdk_1 = require("maishu-services-sdk");
    const maishu_jueying_1 = require("maishu-jueying");
    const emptyImage = '';
    class CategoriesEditor extends maishu_jueying_1.PropEditor {
        constructor(props) {
            super(props);
            // this.control = this.props.control as CategoriesControl;
            this.state = { categories: [] };
            this.shopping = base_component_1.createService(shopping_1.ShoppingService);
            this.imageSerivce = base_component_1.createService(maishu_services_sdk_1.ImageService);
            this.shopping.categories().then(categories => {
                this.setState({ categories });
            });
        }
        save() {
            if (!this.validator.check()) {
                return Promise.reject("form validate fail");
            }
            var category = Object.assign({}, this.currentItem);
            category.Name = this.nameInput.value;
            category.Remark = this.remarkInput.value;
            category.ImagePath = this.picture.value;
            category.SortNumber = this.sortNumberInput.value ? Number.parseInt(this.sortNumberInput.value) : null;
            if (category.Id)
                return this.shopping.updateCategory(category)
                    .then(o => {
                    var c = this.state.categories.filter(o => o.Id == category.Id)[0];
                    Object.assign(c, category);
                    this.setState(this.state);
                    ui.hideDialog(this.dialogElement);
                });
            return this.shopping.addCategory(category).then(data => {
                Object.assign(category, data);
                this.state.categories.push(category);
                this.setState(this.state);
                ui.hideDialog(this.dialogElement);
            });
        }
        // setState(value) {
        //     this.control.state.categories = this.state.categories;
        //     super.setState(value);
        // }
        edit(category) {
            this.validator.clearErrors();
            this.dialogElement.querySelectorAll('input, select, img')
                .forEach((o) => o.value = '');
            if (!category)
                category = {};
            this.currentItem = category;
            this.sortNumberInput.value = (category.SortNumber == null ? '' : category.SortNumber).toString();
            this.nameInput.value = category.Name || '';
            this.remarkInput.value = category.Remark || '';
            this.hiddenInput.checked = category.Hidden || false;
            this.picture.value = this.imageSerivce.imageSource(category.ImagePath || emptyImage);
            ui.showDialog(this.dialogElement);
        }
        componentDidMount() {
            // var pic = Object.assign(this.picture, { name: '图片' });
            Object.defineProperty(this.picture, 'value', {
                get: function () {
                    return this.src;
                },
                set: function (value) {
                    this.src = value;
                }
            });
            let componentProps = this.props.editComponents[0].props;
            let { showIcon } = componentProps;
            let checkPicture = function (value) {
                if (!showIcon)
                    return true;
                return value && value != emptyImage;
            };
            let { required, custom } = maishu_dilu_1.rules;
            this.validator = new maishu_dilu_1.FormValidator(this.dialogElement, { name: "name", rules: [required()] }, //rule: rules.required(this.nameInput)
            {
                name: "picture", rules: [custom(checkPicture, "图片不允许为空")]
                //rule: new Rule(this.picture, checkPicture.bind(this.validator), "图片不允许为空"),
            });
        }
        onFileChanged(e) {
            if (!e.files[0]) {
                return;
            }
            ui.imageFileToBase64(e.files[0], { width: 100, height: 100 })
                .then(data => {
                this.picture.value = data.base64;
            });
        }
        refDeleteButton(e) {
        }
        render() {
            var { categories } = this.state;
            if (categories)
                categories.sort((a, b) => a.SortNumber - b.SortNumber);
            let componentProps = this.props.editComponents[0].props;
            let { showIcon } = componentProps;
            return React.createElement(React.Fragment, null,
                categories ?
                    React.createElement("table", { className: "table table-striped table-bordered table-hover" },
                        React.createElement("thead", null,
                            React.createElement("tr", null,
                                React.createElement("th", null, "\u5E8F\u53F7"),
                                React.createElement("th", null, "\u540D\u79F0"),
                                React.createElement("th", null, "\u5907\u6CE8"),
                                React.createElement("th", null, "\u9690\u85CF"),
                                React.createElement("th", null, "\u56FE\u7247"),
                                React.createElement("th", null, "\u64CD\u4F5C"))),
                        React.createElement("tbody", null,
                            categories.map(o => React.createElement("tr", { key: o.Id },
                                React.createElement("td", null, o.SortNumber),
                                React.createElement("td", null, o.Name),
                                React.createElement("td", null, o.Remark),
                                React.createElement("td", null, o.Hidden),
                                React.createElement("td", { style: { textAlign: 'center' } },
                                    React.createElement("img", { src: this.imageSerivce.imageSource(o.ImagePath), style: { height: 36 } })),
                                React.createElement("td", { style: { textAlign: 'center' } },
                                    React.createElement("button", { className: "btn btn-minier btn-info", style: { marginRight: 4 }, ref: (e) => {
                                            if (!e)
                                                return;
                                            e.onclick = () => this.edit(o);
                                        } },
                                        React.createElement("i", { className: "icon-pencil" })),
                                    React.createElement("button", { className: "btn btn-minier btn-danger", ref: (e) => {
                                            if (!e)
                                                return;
                                            e.onclick = ui.buttonOnClick((event) => {
                                                return this.shopping.deleteCategory(o.Id).then(() => {
                                                    // this.state.categories = categories.filter(a => a.Id != o.Id);
                                                    // this.setState(this.state);
                                                });
                                            }, { confirm: `确定要删除类别'${o.Name}'吗?` });
                                        } },
                                        React.createElement("i", { className: "icon-trash" }))))),
                            categories.length == 0 ?
                                React.createElement("tr", null,
                                    React.createElement("td", { colSpan: 6, className: "text-center", style: { padding: `80px 0 80px 0` } }, "\u6682\u65E0\u6570\u636E")) : null)) : null,
                React.createElement("div", { className: "well clearfix" },
                    React.createElement("div", { className: "pull-right" },
                        React.createElement("button", { className: "btn btn-primary", onClick: () => this.edit() },
                            React.createElement("i", { className: "icon-plus", style: { marginRight: 4 } }),
                            "\u6DFB\u52A0\u7C7B\u522B"))),
                React.createElement("form", { name: "dlg_edit", className: "modal fade", ref: (o) => this.dialogElement = this.dialogElement || o },
                    React.createElement("input", { name: "Id", type: "hidden" }),
                    React.createElement("div", { className: "modal-dialog" },
                        React.createElement("div", { className: "modal-content" },
                            React.createElement("div", { className: "modal-header" },
                                React.createElement("button", { type: "button", className: "close", "data-dismiss": "modal" },
                                    React.createElement("span", { "aria-hidden": "true" }, "\u00D7"),
                                    React.createElement("span", { className: "sr-only" }, "Close")),
                                React.createElement("h4", { className: "modal-title" }, "\u7F16\u8F91")),
                            React.createElement("div", { className: "modal-body" },
                                React.createElement("div", { className: "form-horizontal" },
                                    React.createElement("div", { className: "form-group" },
                                        React.createElement("label", { className: "control-label col-sm-2" }, "\u5E8F\u53F7"),
                                        React.createElement("div", { className: "col-sm-10" },
                                            React.createElement("input", { name: "sortNumber", className: "form-control", placeholder: "\u5546\u54C1\u7C7B\u522B\u7684\u5E8F\u53F7(\u53EF\u7A7A)", ref: (e) => this.sortNumberInput = e || this.sortNumberInput }))),
                                    React.createElement("div", { className: "form-group" },
                                        React.createElement("label", { className: "control-label col-sm-2" }, "\u540D\u79F0*"),
                                        React.createElement("div", { className: "col-sm-10" },
                                            React.createElement("input", { name: "Name", className: "form-control", placeholder: "\u5546\u54C1\u7C7B\u522B\u7684\u540D\u79F0(\u5FC5\u586B)", ref: (e) => this.nameInput = e || this.nameInput }))),
                                    React.createElement("div", { className: "form-group" },
                                        React.createElement("label", { className: "control-label col-sm-2" }, "\u5907\u6CE8"),
                                        React.createElement("div", { className: "col-sm-10" },
                                            React.createElement("input", { name: "Remark", className: "form-control", placeholder: "\u5546\u54C1\u7C7B\u522B\u7684\u5907\u6CE8\u4FE1\u606F(\u53EF\u7A7A)", ref: (e) => this.remarkInput = e || this.remarkInput }))),
                                    React.createElement("div", { className: "form-group", style: { display: showIcon ? 'block' : 'none' } },
                                        React.createElement("label", { className: "control-label col-sm-2" }, "\u56FE\u7247"),
                                        React.createElement("div", { className: "col-sm-10" },
                                            React.createElement("div", { className: "well", style: { margin: 0, padding: 0 } },
                                                React.createElement("img", { style: { width: 100, height: 100 }, ref: (e) => this.picture = e || this.picture, src: emptyImage }),
                                                React.createElement("input", { name: "ImageUpload", type: "file", id: "ImageUpload", multiple: true, style: { position: 'absolute', top: 0, opacity: 0, height: '100%', width: '100%' }, ref: (e) => {
                                                        if (!e)
                                                            return;
                                                        e.onchange = () => this.onFileChanged(e);
                                                    } })))),
                                    React.createElement("div", { className: "form-group" },
                                        React.createElement("div", { className: "col-sm-offset-2 col-sm-10" },
                                            React.createElement("div", { className: "checkbox" },
                                                React.createElement("label", null,
                                                    React.createElement("input", { name: "Hidden", type: "checkbox", ref: (e) => {
                                                            if (!e)
                                                                return;
                                                            this.hiddenInput = e;
                                                            e.onchange = () => {
                                                                this.hiddenInput.value = e.checked;
                                                            };
                                                        } }),
                                                    "\u5728\u524D\u53F0\u9690\u85CF\u8BE5\u7C7B\u522B")))))),
                            React.createElement("div", { className: "modal-footer", style: { marginTop: 0 } },
                                React.createElement("button", { type: "button", className: "btn btn-default", "data-dismiss": "modal" }, "\u53D6\u6D88"),
                                React.createElement("button", { type: "button", className: "btn btn-primary", ref: (e) => {
                                        if (!e)
                                            return;
                                        e.onclick = ui.buttonOnClick(() => this.save(), {
                                            toast: '保存成功!'
                                        });
                                    } }, "\u4FDD\u5B58"))))));
        }
    }
    exports.CategoriesEditor = CategoriesEditor;
});
